<template>
    <div id="top">
        <div class="top" :style= "{'background-image':'url(' + seller.bgImg + ')'}">
            <div class='bg'></div>
            <div class="up">
                <div class="img">
                    <img class="img-main" :src="seller.avatar" alt="">
                </div>
                <div class="content">
                    <div class='brand'>
                        <span class="brandImg"></span>
                        <span>{{seller.name}}</span>
                    </div>
                    <div class='transport'>
                        <p>{{seller.description}} / {{seller.deliveryTime}}分钟送达</p>
                    </div>
                    <div class='discount' v-if= seller.supports>
                        <bgIcon :type = seller.supports[0].type  size = 16></bgIcon>
                        <div class="innerContent">{{seller.supports[0].content}}</div>
                    </div>
                    <div class='num'>
                        <span @click="isMosk = true" v-if="seller.supports"> {{seller.supports.length}}个 ></span>
                    </div>
                </div>
            </div>
            <div class='down'>
                <div class='notice'>
                    <span class='img'> </span>
                    <div class='desc' @click="isMosk = true">{{seller.bulletin}}</div>
                    <div class="more"> > </div>
                </div>
            </div>
        </div>
        <div class="mid">
            <ul>
                <li :class="{active:navNum === 1}" @click="toHome">商品</li>
                <li :class="{active:navNum === 2}" @click="toCommend">评价</li>
                <li :class="{active:navNum === 3}" @click="toStore">商家</li>
            </ul>
        </div>
        <van-overlay :show="isMosk" @click="isMosk = false" z-index = '9999'>
            <mosk/>
        </van-overlay >
    </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    props:{
        navNum:{
            type:Number,
            default:1,
            required:true
        }
    },
    data() {
        return {
            isMosk: false,//控制遮罩的显示隐藏
        };
    },
    computed:{
        ...mapState(['seller']),
        
    },
    methods: {
         //跳转去主页
        toHome(){
            this.$router.push('/home');
        },
        //跳转去评论
        toCommend(){
            this.$router.push('/commend');
        },
        //跳转去商家
        toStore(){
            this.$router.push('/store');
        },
       
        

    },
    mounted() {},
    }
</script>
<style scoped>
    .top{
    position: relative;
    }
    .top .bg{
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -1;
        background: rgba(7, 17, 27,0.5);
        background-size: cover;
        filter: blur(10rem);
    }
    .top .up {
        box-sizing: border-box;
        padding: 48rem 32rem 36rem  0;
        display: flex;
    }
    .top .img-main{
        margin-left:48rem ;
        margin-right:32rem ;
        width: 128rem;
        height: 128rem;
        border-radius: 4rem;
    }
    .top .content .brand{
        font-size: 32rem;
        color:#fff;
        font-weight: bold;
        line-height: 36rem;
        margin-bottom: 16rem;
        display: flex;
    }
    .top .content .brand .brandImg{
        background:url('./img/brand@3x.png') no-repeat;
        background-size:cover;
        margin:4rem 12rem 0 0;
        width: 60rem;
        height: 38rem;
    }
    .top .content{
        position: relative;
        flex: 1;
    }
    .top .content .transport{
        font-size: 24rem;
        color:#fff;
        font-weight: 200;
        line-height: 24rem;
        margin-bottom: 20rem;
    }
    .top .content .discount{
        font-size: 20rem;
        color:#fff;
        font-weight: 200;
        line-height: 24rem;
        margin-bottom: 20rem;
        display: flex;
        align-items: center;
    }
    .top .content .discount .innerContent{
        width: 300rem ;
        margin-left: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .top .content .discount .discountImg{
        width: 24rem;
        height: 24rem;
        background:url('./img/decrease_1@2x.png') no-repeat;
        background-size: cover;
    }
    .top .content .num{
        position: absolute;
        right: 24rem;
        bottom: 0;
        border-radius: 24rem;
        display: inline-block;
        font-size: 20rem;
        color:#fff;
        font-weight: 200;
        line-height: 24rem;
        height: 48rem;
        padding: 14rem 16rem;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.2);
    }
    .down .notice {
        display: flex;
        background-color: rgba(7, 17,27, 0.2);
        height: 56rem;
        box-sizing: content-box;
        padding: 0 24rem;
        font-size: 25rem;
        color: #fff;
        font-weight: 200;
        line-height: 56rem;
        justify-content: center;
        align-items: center;
        vertical-align: top;
    }
    .down .notice .img{
        width: 100rem;
        height: 25rem;
        background:url('./img/bulletin@2x.png') no-repeat;
        background-size: cover;
        margin-right: 8rem;
    }
    .down .notice .desc{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .down .notice .more{
        margin-left: 8rem;
    }
    .mid{
        border-bottom: 1rem solid rgba(7,17,27,0.1);
    }
    .mid ul{
        height: 80rem;
        display: flex;
        justify-content: space-around;
        font-size: 28rem;
        color: rgb(77, 85, 93);
    }
    .mid ul .active{
        color: rgb(240, 20, 20);
    }
    .mid ul li{
        line-height: 80rem;
    }
</style>